<!-- src/components/Profile.vue -->
<template>
  <!-- 主布局：左右分栏 -->
  <el-row :gutter="20" class="profile-page">
    <!-- 左侧：头像卡片 -->
    <el-col :span="8">
      <el-card shadow="hover" class="profile-avatar-card">
        <div class="avatar-wrapper">
          <!-- 随机头像，根据用户名生成 → https://robohash.org -->
          <img :src="avatarSrc" alt="avatar" class="avatar" />
        </div>
        <h3 class="username">{{ user.name }}</h3>
        <p class="nickname">({{ user.nickname }})</p>
        <p class="motto">{{ user.motto }}</p>
        <el-button type="danger" @click="logout">注销登录</el-button>
      </el-card>
    </el-col>

    <!-- 右侧：信息卡片 -->
    <el-col :span="16">
      <el-card shadow="hover">
        <!-- 基本信息：两列描述列表 -->
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="性别">{{ user.sex }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ user.age }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{ user.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
          <el-descriptions-item label="职业">{{ user.job }}</el-descriptions-item>
          <el-descriptions-item label="个人网站">
            <a :href="user.website" target="_blank">{{ user.website }}</a>
          </el-descriptions-item>
        </el-descriptions>

        <!-- 爱好标签 -->
        <el-divider>爱好</el-divider>
          <el-tag
            v-for="(hobby, index) in user.hobbies"
            :key="index"
            effect="dark"
            size="small"
          >
            {{ hobby }}
          </el-tag>
      </el-card>
    </el-col>
  </el-row>
</template>
 <script>
 import { getUserInfo } from '../api/api'
 import boyAvatar from '@/assets/faces/if_brother_3231124.png'
 import girAvatar from '@/assets/faces/if_sister_3231120.png'

 export default {
   name: 'Profile',
   data() {
      return {
        user: {}
      }
   },
   computed: {

     avatarSrc () {
           if (this.user.sex == '男') {
             return boyAvatar
           } else {
             return girAvatar
           }
         }
   },
   methods: {
      logout() {
        this.$store.dispatch('logoutAsync')
          .then(() => {
            this.$router.push('/login') // 在组件内跳转
          })
          .catch(error => {
            alert(error)
          })
      }
   },
   created() {
     const user = JSON.parse(localStorage.getItem('user'))
     if (!user) return    // 如果没有用户信息，直接返回
     if (user.username) {
       // 如果有用户名，调用接口获取用户信息
       getUserInfo(user.username)
         .then((response) => {
           if (response.data.code == 200) {
             this.user = response.data.data
           }
         })
     } else {
       // 如果没有用户名，直接使用localStorage中的用户信息
       this.user = user
     }
   }
 }
 </script>
 <style scoped>
   .profile-page {
     padding: 24px;
   }
   .profile-avatar-card {
     text-align: center;
   }
   .avatar-wrapper {
     width: 120px;
     height: 120px;
     margin: 0 auto 16px;
     border-radius: 50%;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   .avatar {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   .username {
     margin: 0;
     font-weight: 600;
   }
   .nickname {
     margin: 4px 0 12px;
     color: #909399;
   }
   .motto {
     color: #606266;
     font-size: 14px;
     line-height: 1.4;
   }
 </style>
